<template>
	<view :style="skin" class="content userInfo">

		<view class="layout">
			<u-cell :isLink="true" arrow-direction="right" :border="false" size="large" @click="onCoverActionsSelect">
				<text slot="title" class="title">{{$t('me.ProfilePicture')}}</text>
				<u--image slot="value" :src="userInfo.avatar" shape="circle" width="36px" height="36px"
					mode='aspectFill'></u--image>
			</u-cell>

		</view>

		<view class="layout">
			<u-cell-group :border="false">
				<u-cell :isLink="true" arrow-direction="right" :border="false" size="large"
					@click="handleNick(userInfo.nickname)">
					<text slot="title" class="title">{{$t('me.ProfilePicture')}}</text>
					<text slot="value" class="des" style="color: var(--subtopicNextTextColor);">{{userInfo.nickname}}</text>
				</u-cell>

				<u-cell :isLink="true" arrow-direction="right" :border="false" size="large" @click="genderShow = true">
					<text slot="title" class="title">{{$t('me.Nickname')}}</text>
					<text slot="value" class="des"
						style="color: var(--subtopicNextTextColor);">{{userInfo.gender == 1?$t('login.male'):$t('login.female')}}</text>
				</u-cell>

				<u-cell :isLink="true" arrow-direction="right" :border="false" size="large" @click="dateShow = true">
					<text slot="title" class="title">{{$t('login.birth')}}</text>
					<text slot="value" class="des" style="color: var(--subtopicNextTextColor);">{{userInfo.customerBirth}}</text>
				</u-cell>

				<u-cell :isLink="true" arrow-direction="right" :border="false" size="large" @click="skinPage(userInfo.phone)">
					<text slot="title" class="title">{{$t('login.phoneNumber')}}</text>
					<text slot="value" class="des" style="color: var(--subtopicNextTextColor);">{{userInfo.phone}}</text>
				</u-cell>


			</u-cell-group>
		</view>
		<view class="userTips">
			<!-- 实名信息 -->
		</view>
		<view class="layout">
			<u-cell arrow-direction="right" :border="false" size="large">
				<text slot="title" class="title">{{$t('lease.name')}}</text>
				<text slot="value" class="des"
					style="color: var(--subtopicNextTextColor);">{{userInfo.customerMing}}{{userInfo.customerXing}}</text>
			</u-cell>
			<u-cell arrow-direction="right" :border="false" size="large">
				<text slot="title" class="title">{{$t('login.idNumber')}}</text>
				<text slot="value" class="des" style="color: var(--subtopicNextTextColor);">{{userInfo.customerIdNumber}}</text>
			</u-cell>
		</view>

		<view class="bottom">
			<u-button color="var(--subjectColor)" @click="handleSave">save
			</u-button>
		</view>


		<DialogPopup @btnCancel="showPermission=false" @btnConfirm="confirmPermission" :show="showPermission" title="提示"
			handleType="text" textInfo="相册和文件权限使用说明: 用于拍照、读取相册更新用户头像信息 是否允许WellGreen拍摄照片和使用相册"></DialogPopup>

		<DialogPopup @btnCancel="showInputName=false" @btnConfirm="updateName" @setInp='inputNameChang'
			:show="showInputName" :title="$t('me.Nickname')" handleType="input" :inpText='name'></DialogPopup>


		<!-- 日期 -->
		<fui-date-picker :value="maxDate" minDate='1900-01-01' :maxDate="maxDate" :show="dateShow" type="3" @change="change"
			@cancel="dateShow = false"></fui-date-picker>

		<u-action-sheet :closeOnClickOverlay="true" @close="genderShow = false" cancelText="cancel" :actions="genderList"
			@select="genderSelect" :show="genderShow"></u-action-sheet>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import customtabbar from '@/components/custom-tab-bar.vue'
	import DialogPopup from '@/components/DialogPopup.vue'
	import loading from '@/components/loading.vue'
	import HeadBigTitle from '@/components/HeadBigTitle.vue'
	import {
		faceReg
	} from '@/utils/constant.js'

	import {
		iconUpload,
		udUinfo
	} from '@/api/user.js'
	import {
		cameraAuthority
	} from '@/utils/jurisdiction.js'
	import {
		cloudmateURL
	} from '@/utils/requestURL.js'
	import {
		getOffMoney
	} from '@/utils/sql/sqloffLineDtoList.js'
	import {
		getTrunOver
	} from '@/utils/sql/sqlTrunoverDtoList.js'
	import {
		getInCome
	} from '@/utils/sql/sqlInComeDtoList.js'
	import {
		getNoSyncLease,
	} from '@/utils/sql/sqllease.js'
	export default {
		data() {
			return {
				genderShow: false,
				showConfirm: false,
				showPermission: false,
				showInputName: false,
				coverActionsShow: false,
				loading: false,
				name: '',
				userInfo: {},
				genderList: [{
						name: '男',
						value: 1,
					},
					{
						name: '女',
						value: 2,
					}
				],
				maxDate: '',
				dateShow: false,
			}
		},
		onLoad() {
			this.userInfo = JSON.parse(uni.getStorageSync('loginInfo'))
			console.log(this.userInfo);
			this.getMaxDate()
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('me.PersonalInformation'),
			});
			this.genderList = [{
					name: this.$t('login.male'),
					value: 1
				},
				{
					name: this.$t('login.female'),
					value: 2
				},
			]
		},
		methods: {
			async skinPage(phone) {
				// 判断当前是否通过了数据，
				let res1 = await getOffMoney();
				let res2 = await getTrunOver();
				let res3 = await getInCome();
				let res4 = await getNoSyncLease();
				let res1Len = res1.data.length;
				let res2Len = res2.data.length;
				let res3Len = res3.data.length;
				let res4Len = res4.data.length;
				if (res1Len == 0 && res2Len == 0 && res3Len == 0 && res4Len == 0) {
					uni.navigateTo({
						url: '/pagesUserInfo/bindingPhone/bindingPhone'
					})
				} else {
					uni.showToast({
						title: "Please synchronize data first",
						icon: 'none'
					})
				}

			},
			handleNick(t) {
				this.showInputName = true
				this.name = t
			},
			handleSave() {
				udUinfo({
					nickname: this.userInfo.nickname,
					avatar: this.userInfo.avatar,
					gender: this.userInfo.gender,
					customerBirth: this.userInfo.customerBirth,
				}).then(res => {
					console.log(res);
					if (res.code == 0) {
						uni.setStorageSync('loginInfo',JSON.stringify(this.userInfo));
						uni.showToast({
							title: 'Save successfully',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			change(e) {
				this.dateShow = false

				this.userInfo.customerBirth = `${e.year}/${e.month}/${e.day}`
			},
			genderSelect(item) {
				console.log(item);
				this.userInfo.gender = item.value
			},
			getMaxDate() {

				//获取当前年月日
				var now = new Date();
				var year = now.getFullYear(); //得到年份
				var month = now.getMonth() + 1; //得到月份
				var date = now.getDate(); //得到日期
				this.maxDate = year + "-" + month + "-" + date;
			},
			confirm() {
				this.showConfirm = true
			},

			confirmPermission() {
				this.showPermission = false
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {

						uni.navigateTo({
							url: `/pagesUserInfo/chooseImage/chooseImage?src=${res.tempFilePaths[0]}`
						})
					},
				})
			},
			onCoverActionsSelect() {

				cameraAuthority().then(res => {
					console.log(res);
					let that = this
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择
						success: async function(files) {
							let res = await iconUpload(files.tempFilePaths[0])

							let rrs = JSON.parse(res)
							if (rrs.code == 0) {

								that.userInfo.avatar = cloudmateURL + rrs.data.url
							}


						},
					})
				})
			},

			inputNameChang(text) {
				this.name = text
			},
			updateName() {
				if (this.name == '') {
					uni.$u.toast('Please enter a user nickname')
					return false
				}
				let status = faceReg.test(this.name)
				if (status) {
					uni.showToast({
						title: "Please enter the correct user nickname",
						duration: 2000,
						icon: 'none'
					})
					return false
				}
				this.userInfo.nickname = this.name
				this.showInputName = false


			}
		},

		components: {
			customtabbar,
			DialogPopup,
			loading,
			HeadBigTitle
		},
		computed: {
			...mapState({
				skin: state => state.theme.skin
			})

		},

	}
</script>

<style scoped lang="scss">
	.userInfo {
		padding-top: 32px;
		box-sizing: border-box;
	}

	.content {

		.top {
			width: 100%;
			height: 80px;
			background-color: var(--moduleColor);
			padding-top: 16px;
			padding-left: 16px;

			p {
				color: var(--subjectTextColor);
				font-size: 28px;
				line-height: 42px;
				font-weight: 400;
			}
		}

		.userTips {
			margin: 8px 16px;
			font-size: 14px;
			color: #86909C;
		}

		.layout {
			width: calc(100% - 35px);
			margin: 0 auto 19px;
			background-color: white;
			border-radius: 19px;
			padding-top: 16px;
			padding-bottom: 16px;
			background-color: #fff;

			.title {
				color: var(--subjectTextColor);
				font-size: 17px;
				font-weight: 400;
			}

		}

		.bottom {
			width: calc(100% - 32px);
			margin: 0 auto;
			height: 48px;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
		}

	}
</style>